import React, { Fragment, useState, useEffect } from 'react';
// BrowserRouter 可跟服务器配合 , HashRouter 不跟服务器配合, MemoryRouter 不修改url
// import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
// import {MemoryRouter as Router, Route, NavLink} from 'react-router-dom';

import './index.scss';
// 组件
import { Container, SideMenu, Switch as Aswitch } from 'react-fule-ui';

// 菜单数据
import MuenList from './MuenList';
import logo from './img/logo-black.svg';
export default function Home() {
  // 主题换色
  const getAswitch = (data) => {
    const mainBox = document.querySelector('#root'); //dom1
    const popupBox = document.querySelector('#popup'); //dom2
    if (!!data) {
      mainBox.setAttribute('data-theme', 'dark');
      popupBox.setAttribute('data-theme', 'dark');
    } else {
      mainBox.setAttribute('data-theme', 'light');
      popupBox.setAttribute('data-theme', 'light');
    }
  };
  // 切换菜单
  const [activedMenu, setActivedMenu] = useState(true);
  const showMenu = () => {
    setActivedMenu(!activedMenu);
  };
  // 监控浏览器窗口大小
  const wi = () => {
    if (window.innerWidth > 768) {
      setActivedMenu(true);
    }
    else {
      setActivedMenu(false);
    }
  };
  useEffect(() => {
    wi();
    window.onresize = () => {
      wi();
    };
    return () => {
      window.onresize = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [true]);
  return (
    <Fragment>
      <Container full theme="white">
        <Container.Header
          logo={logo}
          opt={
            <>
              <Aswitch label="主题变色" onChange={getAswitch} id="guideStep1" />
              <span
                className={`fule-header__menu ${activedMenu ? 'is-actived' : ''
                  }`}
                role="button"
                onClick={showMenu}
              >
                <span className="fule-header__menu-item"></span>
                <span className="fule-header__menu-item"></span>
                <span className="fule-header__menu-item"></span>
              </span>
            </>
          }
        ></Container.Header>
        <Container.Body>
          {/* {activedMenu && ( */}
          <SideMenu
            show={activedMenu}
            onChange={showMenu}
            title="React 组件"
            data={MuenList}
            search
          ></SideMenu>
          {/* )} */}
          <Router>
            <Switch>
              <Route exact path="/" component={MuenList[0].component} />
              {MuenList.map((item, index) => (
                <Route
                  path={item.path}
                  component={item.component}
                  key={index}
                />
              ))}
            </Switch>
          </Router>
        </Container.Body>
      </Container>
    </Fragment>
  );
}
